<template>
  <div class="app">
    <van-nav-bar title="我的订单" left-text="" left-arrow @click="backlink()">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div style="display: flex; width: 100%; align-items: center">
      <van-tabs
        v-model:active="active"
        style="width: 100vw"
        @change="tabchange"
      >
        <van-tab title="全部" name="0"> </van-tab>
        <van-tab title="球桌" name="1"> </van-tab>
        <van-tab title="教练" name="2"> </van-tab>
        <van-tab title="点餐" name="3"> </van-tab>
        <van-tab title="商城" name="4"> </van-tab>
      </van-tabs>
    </div>
    <div>
      <div v-if="active <= 2" class="filterbox">
        <div
          v-for="(filter, index) in [
            '预约中',
            '进行中',
            '待支付',
            '已完成',
            '已取消',
          ]"
          :key="index"
          class="filterbtn"
          :class="{ selected: selectedFilter === filter }"
          @click="selectFilter(filter)"
        >
          {{ filter }}
        </div>
      </div>

      <div v-else class="filterbox1">
        <div
          v-for="(filter, index) in ['进行中', '已完成', '已退款']"
          :key="index"
          class="filterbtn"
          :class="{ selected: selectedFilter === filter }"
          @click="selectFilter(filter)"
        >
          {{ filter }}
        </div>
      </div>
    </div>
    <div class="ordercontainer" v-if="showlist.length != 0">
      <div v-for="(item, index) in showlist" :key="index">
        <div
          v-if="item.type == 'table' && (active == 0 || active == 1)"
          class="ordercard"
        >
          <div class="store_name">
            <div>
              <icon-svg
                icon-class="order_club"
                icon-color="#304056"
                class="club-icon"
              ></icon-svg
              >{{ item.store_name }}
            </div>
            <div v-if="item.order_status == 1">预约中</div>
            <div v-if="item.order_status == 5">进行中</div>
            <div v-if="item.order_status == 3">已完成</div>
            <div v-if="item.order_status == 2">待支付</div>
            <div v-if="item.order_status == 4">已取消</div>
          </div>
          <div class="orderinfo">
            <div style="display: flex; margin-bottom: 10px">
              <div class="storecover_image">
                <img v-lazy="item.storecover_image" alt="" />
              </div>
              <div class="contentbox">
                <div class="content">{{ item.ordercontent }}</div>
                <div class="order_time">下单时间：{{ item.order_time }}</div>
                <van-text-ellipsis class="order_time" :content="item.address" />
              </div>
            </div>
            <div class="heji">合计：{{ item.pay_money }}元</div>
          </div>
          <div style="margin-top: 10px">
            <van-button
              class="chakanbtn"
              v-if="item.order_status != 4"
              @click="gotodetail(item)"
              >查看详情</van-button
            >
          </div>
        </div>

        <div
          v-if="item.type == 'zhujiao' && (active == 0 || active == 2)"
          class="ordercard"
        >
          <div class="store_name">
            <div>
              <icon-svg
                icon-class="order_club"
                icon-color="#304056"
                class="club-icon"
              ></icon-svg
              >{{ item.store_name }}
            </div>
            <div v-if="item.order_status == 1">预约已同意</div>
            <div v-if="item.order_status == 5">进行中</div>
            <div v-if="item.order_status == 2">已完成</div>
            <div v-if="item.order_status == 4">预约未同意</div>
          </div>
          <div class="orderinfo">
            <div style="display: flex; margin-bottom: 10px">
              <div class="storecover_image">
                <img v-lazy="item.zhujiao_image" alt="" />
              </div>
              <div class="contentbox">
                <div class="content">{{ item.zhujiao_name }}</div>
                <div class="order_time">下单时间：{{ item.order_time }}</div>
                <div class="order_time">预约时间：{{ item.time }}</div>
              </div>
            </div>
            <div class="heji">合计：{{ item.pay_money }}元</div>
          </div>
          <div style="margin-top: 10px">
            <van-button class="chakanbtn" @click="gotodetail(item)">查看详情</van-button>
          </div>
        </div>
      </div>
    </div>
    <div class="ordercontainer" v-else>
      <div style="font-size: 20px; margin: 50% auto">暂无订单</div>
    </div>
  </div>
</template>
  
<script>
import { useStore } from "../../store/index.js";
import { showToast } from "vant";
import { checktorder, checkzorder } from "@/http/request.js";
export default {
  data() {
    return {
      active: "0",
      type: 0,
      selectedFilter: "",
      orderlist: [],
      showlist: [], // 新增 showlist
    };
  },
  methods: {
    backlink() {
      this.$router.back();
    },
    handleSelect() {},
    tabchange(value) {
      this.active = value;
      this.updateShowList(); // 切换 tab 时更新 showlist
    },
    selectFilter(filter) {
      this.selectedFilter = this.selectedFilter === filter ? '' : filter;
      this.updateShowList(); // 筛选条件变化时更新 showlist
    },
    updateShowList() {
      if (this.active <= 2) {
        this.showlist = this.orderlist.filter((item) => {
          if (this.selectedFilter === "") return true;
          if (this.selectedFilter === "预约中") return item.order_status === 1;
          if (this.selectedFilter === "进行中") return item.order_status === 5;
          if (this.selectedFilter === "待支付") return item.order_status === 2;
          if (this.selectedFilter === "已完成") return item.order_status === 3;
          if (this.selectedFilter === "已取消") return item.order_status === 4;
          return false;
        });
      } else {
        this.showlist = this.orderlist.filter((item) => {
          if (this.selectedFilter === "") return true;
          if (this.selectedFilter === "进行中") return item.order_status === 5;
          if (this.selectedFilter === "已完成") return item.order_status === 2;
          if (this.selectedFilter === "已退款")
            return /* 根据实际需求填写 */ false;
          return false;
        });
      }
    },
    typechange(value) {
      console.log(value);
    },
    gotodetail(item) {
      if (item.order_status == 1) {
        this.$router.push("/tableyuyueing");
      } else if (item.order_status == 5) {
        this.$router.push("/tableplaying");
      } else if (item.order_status == 2) {
        this.$router.push("/checkout");
      } else if (item.order_status == 3) {
        let tableorderinfo = { table: [] };
        tableorderinfo.table.push(item);
        this.$router.push({
          name: "OrderDetail",
          params: {
            orderinfo: JSON.stringify(tableorderinfo),
          },
        });
      }
    },
    initOrder() {
      this.orderlist = [];
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      Promise.all([
        checktorder({ u_id: userinfo.id }),
        checkzorder({ user_id: userinfo.id }),
      ]).then(([checktorderRes, checkzorderRes]) => {
        if (checktorderRes.code == 0) {
          for (var i = 0; i < checktorderRes.data.length; i++) {
            let order = checktorderRes.data[i];
            if (order.t_grade == 1) {
              order.ordercontent = "中巴" + order.t_number + "号球桌";
            } else if (order.t_grade == 2) {
              order.ordercontent = "包间" + order.t_number + "号球桌";
            } else if (order.t_grade == 3) {
              order.ordercontent = "斯诺克" + order.t_number + "号球桌";
            }
            order.type = "table";
            this.orderlist.push(order);
          }
        } else {
          showToast(checktorderRes.msg);
        }

        if (checkzorderRes.code == 0) {
          for (var i = 0; i < checkzorderRes.data.length; i++) {
            let order = checkzorderRes.data[i];
            let startDate = new Date(order.start_time);
            let endDate = new Date(order.end_time);
            let startTimeString = `${startDate.getFullYear()}-${(
              startDate.getMonth() + 1
            )
              .toString()
              .padStart(2, "0")}-${startDate
              .getDate()
              .toString()
              .padStart(2, "0")} ${startDate
              .getHours()
              .toString()
              .padStart(2, "0")}:${startDate
              .getMinutes()
              .toString()
              .padStart(2, "0")}`;
            let endTimeString = `${endDate
              .getHours()
              .toString()
              .padStart(2, "0")}:${endDate
              .getMinutes()
              .toString()
              .padStart(2, "0")}`;

            // 合并时间范围格式
            let timeRange = `${startTimeString} - ${endTimeString}`;
            order.time = timeRange;
            order.type = "zhujiao";
            this.orderlist.push(order);
          }
        }
        this.orderlist.sort((a, b) => {
          const timeA = new Date(a.order_time).getTime();
          const timeB = new Date(b.order_time).getTime();
          return timeB - timeA;
        });

        // 初始化 showlist
        this.updateShowList();
      });
    },
  },
  mounted() {
    this.initOrder();
  },
};
</script>

<style scoped>
.app {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f2f3f5;
}
.filterbox {
  width: 95%;
  height: 30px;
  padding: 8px;
  margin: 5px auto 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filterbox1 {
  width: 75%;
  height: 30px;
  padding: 8px;
  margin: 5px auto 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filterbtn {
  width: 70px;
  height: 30px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background-color: white;
  color: rgb(110, 105, 105);
}
.filterbtn.selected {
  /* 选中时的样式，比如改变背景颜色或文字颜色 */
  background-color: #a0c9f5;
  color: white;
}
.ordercontainer {
  width: 100%;
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
}
.ordercard {
  width: 100%;
  background-color: white;
  box-sizing: border-box;
  margin: 10px auto;
  padding: 8px 20px 8px 20px;
  display: flex;
  flex-direction: column;
}
.store_name {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  height: 30px;
  border-bottom: 1px solid rgb(179, 179, 179);
}
.club-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.orderinfo {
  margin-top: 10px;
  border-bottom: 1px solid rgb(179, 179, 179);
}
.storecover_image {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  overflow: hidden;
}
.storecover_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contentbox {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
  width: 80%;
}
.contentbox .content {
  font-size: 18px;
  font-weight: 550;
}
.order_time {
  font-size: 16px;
  color: gray;
}
.heji {
  font-size: 18px;
  font-weight: 550;
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-end;
}
.chakanbtn {
  width: 100px;
  height: 32px;
  border-radius: 20px;
  float: right;
  margin-right: 5px;
  border: 1px solid black;
}
</style>
  <style>
.dropdownmenu .van-dropdown-menu__bar {
  box-shadow: none !important;
}
.dropdownmenu .van-dropdown-menu__title {
  font-size: 0.377rem !important;
  color: #646566;
}
.chakanbtn .van-button__text {
  font-weight: 550 !important;
  font-size: 16px;
}
</style>